<!DOCTYPE html>
<html lang="zh" class="js csstransforms3d">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="generator" content="Hugo 0.93.0" />
    <meta name="description" content="Documentation for Hugo Learn Theme">
<meta name="author" content="Mathieu Cornic">

    <link rel="icon" href="/images/favicon.png" type="image/png">

    <title>Ajax简单介绍 :: welcome to my blog</title>

    
    <link href="/css/nucleus.css?1648731304" rel="stylesheet">
    <link href="/css/fontawesome-all.min.css?1648731304" rel="stylesheet">
    <link href="/css/hybrid.css?1648731304" rel="stylesheet">
    <link href="/css/featherlight.min.css?1648731304" rel="stylesheet">
    <link href="/css/perfect-scrollbar.min.css?1648731304" rel="stylesheet">
    <link href="/css/auto-complete.css?1648731304" rel="stylesheet">
    <link href="/css/atom-one-dark-reasonable.css?1648731304" rel="stylesheet">
    <link href="/css/theme.css?1648731304" rel="stylesheet">
    <link href="/css/tabs.css?1648731304" rel="stylesheet">
    <link href="/css/hugo-theme.css?1648731304" rel="stylesheet">
    
    <link href="/css/theme-green.css?1648731304" rel="stylesheet">
    
    

    <script src="/js/jquery-3.3.1.min.js?1648731304"></script>

    <style>
      :root #header + #content > #left > #rlblock_left{
          display:none !important;
      }
      
    </style>
    
  </head>
  <body class="" data-url="/javascript/ajax/">
    <nav id="sidebar" class="showVisitedLinks">



  <div id="header-wrapper">
    <div id="header">
      <a id="logo" href='/'>

<svg id="grav-logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	width="100%" height="100%"  viewBox="0 0 285.1 69.9" xml:space="preserve">
<g>
	<path d="M35,0c9.6,0,17.9,3.4,24.7,10.3c6.8,6.8,10.3,15,10.3,24.7c0,9.7-3.4,17.9-10.3,24.7c-6.8,6.8-15,10.3-24.7,10.3
		c-9.7,0-17.9-3.4-24.7-10.3C3.4,52.8,0,44.6,0,34.9c0-9.6,3.4-17.9,10.3-24.7C17.1,3.4,25.3,0,35,0z M22.3,63.7
		c0.3-7.4,0.3-14.7,0-22.1c-2.1-0.4-4-0.4-5.9,0c-0.2,0.8-0.2,2.5-0.1,4.9c0.1,2.3,0,3.9-0.3,4.8c-1.7-0.6-2.7-2.1-3.1-4.6
		c-0.1-0.7-0.1-3.3-0.1-8c0-14.5-0.1-23-0.3-25.6c-3.6,4.1-5.6,7-5.9,8.5v10.9c0,4.5,0.1,8.1,0.2,10.9c0,0.4,0,1.3-0.1,2.8
		c-0.1,1.2,0,2.1,0.1,2.6c0.1,0.6,1.1,2.1,2.8,4.7C13.2,58.7,17.5,62.2,22.3,63.7z M44.6,65.4c0.3-5,0.2-12.9-0.1-23.6
		c-2.1-0.3-4.1-0.3-5.9,0c-0.2,2-0.2,5.1-0.1,9.5c0.1,4.3,0,7.5-0.1,9.5c-2.9,0.4-5,0.3-6.2-0.1c-0.2-5.6-0.2-15.2-0.1-28.7
		c0.1-12.4,0-21.8-0.3-28.3c-2.4,0.1-4.3,0.6-5.7,1.3c-0.1,7.7-0.2,17.7-0.1,30.1c0,16.5,0,26.6,0,30.3c2.3,1.1,5.4,1.7,9.4,1.7
		C38.9,66.9,42.1,66.4,44.6,65.4z M48.1,64.1c9.7-4.6,15.7-12,18-22.2c-1.8-0.2-3.8-0.3-6.1-0.3c-1.6,3.9-2.6,6.3-3.2,7.2
		c-1.1,1.7-2,2.5-2.7,2.5C54,46,54,39.1,54,30.5c0-11.5,0-18.4,0-20.9c-1.4-1.4-3.3-2.5-5.7-3.4C48.1,6.3,48,6.4,48,6.7
		c0,3.5,0,13.1,0,28.8C47.9,47.2,48,56.8,48.1,64.1z"/>
</g>
<g>
	<path d="M116.6,51.3h-29c-0.5,0-0.9-0.1-1.3-0.2c-0.4-0.2-0.7-0.4-1-0.7c-0.3-0.3-0.5-0.6-0.7-1c-0.2-0.4-0.2-0.8-0.2-1.3V16.3h6.3
		V45h25.8V51.3z"/>
	<path d="M154.8,51.3h-22.9c-0.9,0-1.8-0.2-2.9-0.5c-1-0.3-2-0.8-2.9-1.5c-0.9-0.7-1.6-1.6-2.2-2.8c-0.6-1.1-0.9-2.5-0.9-4.2V19.5
		c0-0.4,0.1-0.9,0.2-1.2c0.2-0.4,0.4-0.7,0.7-1c0.3-0.3,0.6-0.5,1-0.7c0.4-0.2,0.8-0.2,1.3-0.2h28.6v6.3h-25.4v19.8
		c0,0.8,0.2,1.5,0.7,1.9s1.1,0.7,1.9,0.7h22.9V51.3z M151.9,37h-20v-6.4h20V37z"/>
	<path d="M197.3,51.3H191v-8.6h-22.3v8.6h-6.3V33.8c0-2.6,0.4-4.9,1.3-7.1s2.1-4,3.7-5.5c1.6-1.5,3.4-2.8,5.5-3.6
		c2.1-0.9,4.5-1.3,7-1.3h14.3c0.4,0,0.9,0.1,1.2,0.2c0.4,0.2,0.7,0.4,1,0.7s0.5,0.6,0.7,1c0.2,0.4,0.2,0.8,0.2,1.2V51.3z
		 M168.7,36.4H191V22.6h-11.2c-0.2,0-0.6,0-1.2,0.1c-0.6,0.1-1.4,0.2-2.2,0.4c-0.8,0.2-1.7,0.6-2.6,1c-0.9,0.5-1.8,1.1-2.5,2
		c-0.8,0.8-1.4,1.9-1.9,3.1c-0.5,1.2-0.7,2.8-0.7,4.5V36.4z"/>
	<path d="M241.7,28.1c0,1.4-0.2,2.7-0.5,3.9c-0.4,1.1-0.8,2.1-1.5,3c-0.6,0.9-1.3,1.6-2.1,2.2c-0.8,0.6-1.6,1.1-2.5,1.5
		c-0.9,0.4-1.8,0.7-2.6,0.9c-0.9,0.2-1.7,0.3-2.5,0.3l13.3,11.5h-9.8l-13.2-11.5h-4.6v-6.3H230c0.8-0.1,1.5-0.2,2.2-0.5
		c0.7-0.3,1.2-0.6,1.7-1.1c0.5-0.5,0.9-1,1.1-1.6c0.3-0.6,0.4-1.4,0.4-2.2v-4c0-0.4,0-0.6-0.1-0.8c-0.1-0.2-0.2-0.3-0.3-0.4
		c-0.1-0.1-0.3-0.1-0.4-0.2c-0.2,0-0.3,0-0.4,0h-20.9v28.7h-6.3V19.5c0-0.4,0.1-0.9,0.2-1.2c0.2-0.4,0.4-0.7,0.7-1
		c0.3-0.3,0.6-0.5,1-0.7c0.4-0.2,0.8-0.2,1.3-0.2H234c1.4,0,2.6,0.3,3.6,0.8s1.8,1.2,2.4,1.9c0.6,0.8,1,1.6,1.3,2.5
		c0.3,0.9,0.4,1.7,0.4,2.5V28.1z"/>
	<path d="M285.1,48.6c0,0.5-0.1,0.9-0.3,1.3c-0.2,0.4-0.4,0.7-0.7,1c-0.3,0.3-0.6,0.5-1,0.7c-0.4,0.2-0.8,0.2-1.2,0.2
		c-0.4,0-0.8-0.1-1.2-0.2c-0.4-0.1-0.8-0.4-1.1-0.7l-23.2-24.2v24.7h-6.3V19c0-0.7,0.2-1.2,0.5-1.8c0.4-0.5,0.8-0.9,1.4-1.2
		c0.6-0.2,1.2-0.3,1.9-0.2s1.2,0.4,1.6,0.9l23.2,24.2V16.3h6.3V48.6z"/>
</g>
</svg>

</a>

    </div>
    
        <div class="searchbox">
    <label for="search-by"><i class="fas fa-search"></i></label>
    <input data-search-input id="search-by" type="search" placeholder="">
    <span data-search-clear=""><i class="fas fa-times"></i></span>
</div>

<script type="text/javascript" src="/js/lunr.min.js?1648731304"></script>
<script type="text/javascript" src="/js/auto-complete.js?1648731304"></script>
<script type="text/javascript">
    
        var baseurl = "\/";
    
</script>
<script type="text/javascript" src="/js/search.js?1648731304"></script>

    
  </div>
  

    <div class="highlightable">
    <ul class="topics">

        
          
          




 
  
    
    <li data-nav-id="/javascript/" title="— JavaScript" class="dd-item
        parent
        
        
        ">
      <a href="/javascript/">
          <b>1. </b>— JavaScript
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E8%AE%A1%E6%97%B6%E5%99%A8%E6%96%B9%E6%B3%95%E5%8F%8A%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%94%E7%94%A8/" title="JS定时器应用" class="dd-item
        
        
        
        ">
      <a href="/javascript/%E8%AE%A1%E6%97%B6%E5%99%A8%E6%96%B9%E6%B3%95%E5%8F%8A%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%94%E7%94%A8/">
          JS定时器应用
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/ajax/" title="Ajax简单介绍" class="dd-item
        parent
        active
        
        ">
      <a href="/javascript/ajax/">
          Ajax简单介绍
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E5%AF%B9%E8%B1%A1%E6%8B%B7%E8%B4%9D/" title="JS对象拷贝" class="dd-item
        
        
        
        ">
      <a href="/javascript/%E5%AF%B9%E8%B1%A1%E6%8B%B7%E8%B4%9D/">
          JS对象拷贝
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/js%E5%86%85%E5%AD%98%E6%9C%BA%E5%88%B6/" title="JS中的内存机制" class="dd-item
        
        
        
        ">
      <a href="/javascript/js%E5%86%85%E5%AD%98%E6%9C%BA%E5%88%B6/">
          JS中的内存机制
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/javascript/%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/" title="JS遍历方法总结" class="dd-item
        
        
        
        ">
      <a href="/javascript/%E9%81%8D%E5%8E%86%E6%96%B9%E6%B3%95/">
          JS遍历方法总结
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/node.js/" title="— Node.js" class="dd-item
        
        
        
        ">
      <a href="/node.js/">
          <b>2. </b>— Node.js
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
      <li data-nav-id="/node.js/koa%E5%9F%BA%E7%A1%80/" title="Koa创建本地服务器" class="dd-item ">
        <a href="/node.js/koa%E5%9F%BA%E7%A1%80/">
        Koa创建本地服务器
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/node.js/nunjucks%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%85%A5%E9%97%A8/" title="Nunjucks模板引擎常用基础" class="dd-item ">
        <a href="/node.js/nunjucks%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%85%A5%E9%97%A8/">
        Nunjucks模板引擎常用基础
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/nodemailer/" title="Nodemailer实现邮箱注册" class="dd-item
        
        
        
        ">
      <a href="/node.js/nodemailer/">
          Nodemailer实现邮箱注册
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/node%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F/" title="Node博客系统开发记录" class="dd-item
        
        
        
        ">
      <a href="/node.js/node%E5%8D%9A%E5%AE%A2%E7%B3%BB%E7%BB%9F/">
          Node博客系统开发记录
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/node-%E7%88%AC%E8%99%AB/" title="Node爬虫思路整理" class="dd-item
        
        
        
        ">
      <a href="/node.js/node-%E7%88%AC%E8%99%AB/">
          Node爬虫思路整理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/cookiesession%E5%BA%94%E7%94%A8/" title="cookie,session实现登录验证" class="dd-item
        
        
        
        ">
      <a href="/node.js/cookiesession%E5%BA%94%E7%94%A8/">
          cookie,session实现登录验证
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/node.js/token%E5%AE%9E%E4%BE%8B/" title="Egg.js: token应用实例" class="dd-item
        
        
        
        ">
      <a href="/node.js/token%E5%AE%9E%E4%BE%8B/">
          Egg.js: token应用实例
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/node.js/cookie-%E5%92%8C-session/" title="koa应用cookie,session实例" class="dd-item ">
        <a href="/node.js/cookie-%E5%92%8C-session/">
        koa应用cookie,session实例
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/vue/" title="— Vue.js" class="dd-item
        
        
        
        ">
      <a href="/vue/">
          <b>3. </b>— Vue.js
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
      <li data-nav-id="/vue/vue2.0%E8%B5%B7%E6%AD%A5/" title="vue基础入门" class="dd-item ">
        <a href="/vue/vue2.0%E8%B5%B7%E6%AD%A5/">
        vue基础入门
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
      <li data-nav-id="/vue/vue-%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC/" title="vue组件传值总结" class="dd-item ">
        <a href="/vue/vue-%E7%BB%84%E4%BB%B6%E4%BC%A0%E5%80%BC/">
        vue组件传值总结
        <i class="fas fa-check read-icon"></i>
        </a>
    </li>
     
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/vue/vuerouter/" title="VueRouter常用点整理" class="dd-item
        
        
        
        ">
      <a href="/vue/vuerouter/">
          VueRouter常用点整理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/web/" title="— Web About" class="dd-item
        
        
        
        ">
      <a href="/web/">
          <b>4. </b>— Web About
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/web/indexeddb/" title="IndexedDB数据库常用函数封装" class="dd-item
        
        
        
        ">
      <a href="/web/indexeddb/">
          IndexedDB数据库常用函数封装
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
            
            




 
  
    
    <li data-nav-id="/web/url%E5%A4%84%E7%90%86/" title="URL手动处理" class="dd-item
        
        
        
        ">
      <a href="/web/url%E5%A4%84%E7%90%86/">
          URL手动处理
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
          




 
  
    
    <li data-nav-id="/myimg/" title="— 杂 感 . . ." class="dd-item
        
        
        
        ">
      <a href="/myimg/">
          <b>5. </b>— 杂 感 . . .
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
        <ul>
          
          
            
          
          

        
          
            
            




 
  
    
    <li data-nav-id="/myimg/myimage/" title="Myimages" class="dd-item
        
        
        
        ">
      <a href="/myimg/myimage/">
          Myimages
          
            <i class="fas fa-check read-icon"></i>
          
      </a>
      
      
    </li>
  
 

            
          
        
        </ul>
      
    </li>
  
 

          
        
    </ul>

    
    
      <section id="shortcuts">
        <h3></h3>
        <ul>
          
              <li>
                  <a class="padding" href="https://gitee.com/wen-yun-li"><i class='fab fa-fw fa-github'></i> — Gitee</a>
              </li>
          
              <li>
                  <a class="padding" href="https://github.com/liwenyun"><i class='fab fa-fw fa-github'></i> — GitHub</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.runoob.com/"><i class='fas fa-fw fa-bookmark'></i>— 菜鸟教程</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.eggjs.org/zh-CN/intro/quickstart"><i class='fas fa-fw fa-bookmark'></i>— Egg.js 文档</a>
              </li>
          
              <li>
                  <a class="padding" href="https://www.axios-http.cn/docs/intro"><i class='fas fa-fw fa-bookmark'></i>— Axios 文档</a>
              </li>
          
              <li>
                  <a class="padding" href="https://v3.cn.vuejs.org/guide/introduction.html"><i class='fas fa-fw fa-bookmark'></i>— Vue.js 文档</a>
              </li>
          
        </ul>
      </section>
    

    
    <section id="prefooter">
      <hr/>
      <ul>
      

      
        <li><a class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> </a></li>
      
      </ul>
    </section>
    
    <section id="footer">
      <center>
    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn/archive/master.zip" data-icon="octicon-cloud-download" aria-label="Download matcornic/hugo-theme-learn on GitHub">Download</a>

    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn" data-icon="octicon-star" data-show-count="true" aria-label="Star matcornic/hugo-theme-learn on GitHub">Star</a>

    
    <a class="github-button" href="https://github.com/matcornic/hugo-theme-learn/fork" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork matcornic/hugo-theme-learn on GitHub">Fork</a>

    <p>Built with <a href="https://github.com/matcornic/hugo-theme-learn"><i class="fas fa-heart"></i></a> from <a href="https://getgrav.org">Grav</a> and <a href="https://gohugo.io/">Hugo</a></p>
</center>

<script async defer src="https://buttons.github.io/buttons.js"></script>

    </section>
  </div>
</nav>




        <section id="body">
        <div id="overlay"></div>
        <div class="padding highlightable">
              
              <div>
                <div id="top-bar">
                
                  
                  
                  
                  <div id="top-github-link">
                    <a class="github-link" title='' href="https://github.com/matcornic/hugo-theme-learn/edit/master/exampleSite/content/JavaScript/Ajax/_index.zh.md" target="blank">
                      <i class="fas fa-code-branch"></i>
                      <span id="top-github-link-text"></span>
                    </a>
                  </div>
                  
                
                
                <div id="breadcrumbs" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
                    <span id="sidebar-toggle-span">
                        <a href="#" id="sidebar-toggle" data-sidebar-toggle="">
                          <i class="fas fa-bars"></i>
                        </a>
                    </span>
                  
                  <span id="toc-menu"><i class="fas fa-list-alt"></i></span>
                  
                  <span class="links">
                 
                 
                    
          
          
            
            
          
          
            
            
          
          
            <a href='/'>LIWENYUN BLOG</a> > <a href='/javascript/'>— JavaScript</a> > Ajax简单介绍
          
        
          
        
          
        
                 
                  </span>
                </div>
                
                    <div class="progress">
    <div class="wrapper">
<nav id="TableOfContents">
  <ul>
    <li><a href="#http协议">HTTP协议</a>
      <ul>
        <li><a href="#请求的常用方法">请求的常用方法</a></li>
        <li><a href="#协议状态码">协议状态码</a></li>
      </ul>
    </li>
    <li><a href="#ajax">Ajax</a></li>
    <li><a href="#ajax原理">Ajax原理</a></li>
    <li><a href="#封装一个ajax方法">封装一个Ajax方法</a>
      <ul>
        <li><a href="#回调函数">回调函数</a></li>
        <li><a href="#promise">promise</a></li>
      </ul>
    </li>
    <li><a href="#ajax第三方模块-axios应用">Ajax第三方模块-Axios应用</a>
      <ul>
        <li><a href="#下载并引入axios">下载并引入Axios</a></li>
        <li><a href="#后台程序">后台程序</a></li>
        <li><a href="#jquery中的ajax方法">jQuery中的ajax方法</a></li>
      </ul>
    </li>
    <li><a href="#跨域请求">跨域请求</a>
      <ul>
        <li><a href="#同源策略">同源策略</a></li>
        <li><a href="#jsonp原理">jsonp原理</a></li>
        <li><a href="#设置响应头">设置响应头</a></li>
      </ul>
    </li>
  </ul>
</nav>
    </div>
</div>

                
              </div>
            </div>
            
        <div id="head-tags">
        
        </div>
        
        <div id="body-inner">
          
            <h1>
              
              Ajax简单介绍
            </h1>
          

        



	<h2 id="http协议">HTTP协议</h2>
<p>http协议全称超文本传输协议，是服务器与客户端通信的协议。在http协议的约定下，客户端可以向服务器发送请求，服务器在接收到请求之后，给予客户端响应。</p>
<h3 id="请求的常用方法">请求的常用方法</h3>
<p>http协议常用的四种方法，用来完成数据的增、删、改、查操作。</p>
<ul>
<li>get方法：获取数据</li>
<li>post方法：提交数据</li>
<li>put方法：修改数据</li>
<li>delete方法：删除数据</li>
</ul>
<p>需要注意的是，http请求本身并不会完成增删改查的基本操作，真正的操作仍然是由服务器完成，这些操作仅仅是一种约定。</p>
<p>例如：我们用get请求配合服务器程序，可以获取数据，同样也可以添加、删除、修改数据，但是为了规范我们的程序，通常只用get方法来查询数据。</p>
<h3 id="协议状态码">协议状态码</h3>
<p>http的状态码被分为5大类，状态码为客户端提供一种理解事务处理结果的便捷方式</p>
<ul>
<li>
<p>100~199（信息性状态码）：HTTP/1.1向协议中引入了信息性状态码</p>
</li>
<li>
<p>200~299（成功状态码）：这些表示请求都是成功。不同的成功状态码，分别对应于不同类型的请求</p>
</li>
<li>
<p>300~399（重定向状态码）：重定向状态码要么告知客户端使用替代位置来访问他们所感兴趣的资源，要么就提供一个替代的响应而不是资源的内容</p>
</li>
<li>
<p>400~499（客户端状态码）：有时客户端会发送一些服务器无法处理的东西，服务器在告诉我们，它对我们请求的资源一无所知，比如最常见的404 Not Found错误码。</p>
</li>
<li>
<p>500~599（服务器状态码）：有时客户端发送了一条有效请求，服务器自身却出错了，就会返回5xx状态码</p>
</li>
</ul>
<p>三个常用的HTTP状态码：</p>
<ul>
<li>
<p>200 OK ：请求被正常处理</p>
</li>
<li>
<p>404 Not Found：服务器找不到客户端请求的资源，也有可能是服务器不想 让你访问而故意返回404</p>
</li>
<li>
<p>500 Internal Server Error：服务器内部错误</p>
</li>
</ul>
<h2 id="ajax">Ajax</h2>
<p>很多时候，向服务器发送请求后，浏览器中响应的页面都是整页刷新。</p>
<p>有时候，我们只希望获取页面的局部数据，而不必整页刷新，这个时候就需要使用Ajax来实现功能了。</p>
<p>Ajax 的全称是Asynchronous JavaScript and XML（异步的JavaScript 和 XML）。这个概念出现的比较早，那个时候前端和后台的数据交互主要以XML格式为主，例如下面的数据格式：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">fruit</span>&gt;
</span></span><span style="display:flex;"><span>   &lt;<span style="color:#f92672">name</span>&gt;apple&lt;/<span style="color:#f92672">name</span>&gt;
</span></span><span style="display:flex;"><span>   &lt;<span style="color:#f92672">weight</span>&gt;0.5kg&lt;/<span style="color:#f92672">weight</span>&gt;
</span></span><span style="display:flex;"><span>   &lt;<span style="color:#f92672">color</span>&gt;red&lt;/<span style="color:#f92672">color</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">fruit</span>&gt;
</span></span></code></pre></div><p>现在仍然存在很多用xml交互数据的情况，但是目前主流的数据格式使用的是json（JavaScript对象表示法），例如下面的格式：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span>{
</span></span><span style="display:flex;"><span>    <span style="color:#e6db74">&#34;fruit&#34;</span><span style="color:#f92672">:</span>{
</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">&#34;name&#34;</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;apple&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">&#34;weight&#34;</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;0.5kg&#34;</span>,
</span></span><span style="display:flex;"><span>        <span style="color:#e6db74">&#34;color&#34;</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;red&#34;</span>
</span></span><span style="display:flex;"><span>    }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p><strong>ajax的优缺点</strong></p>
<ul>
<li>优点：按需获取数据，提升系统性能。</li>
<li>缺点：异步获取数据，不利于搜索引擎优化。</li>
</ul>
<h2 id="ajax原理">Ajax原理</h2>
<p>Ajax的原理是通过XMLhttpRequest对象向服务器发送请求，实例代码如下所示：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">//后台程序
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#34;/&#34;</span>, <span style="color:#66d9ef">async</span> <span style="color:#a6e22e">ctx</span> =&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">await</span> <span style="color:#a6e22e">ctx</span>.<span style="color:#a6e22e">render</span>(<span style="color:#e6db74">&#34;index&#34;</span>)
</span></span><span style="display:flex;"><span>})
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#34;/data&#34;</span>, <span style="color:#66d9ef">async</span> <span style="color:#a6e22e">ctx</span> =&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">ctx</span>.<span style="color:#a6e22e">body</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;hello world&#34;</span>
</span></span><span style="display:flex;"><span>})
</span></span><span style="display:flex;"><span><span style="color:#75715e">//前端程序
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">var</span> <span style="color:#a6e22e">xhr</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">XMLHttpRequest</span>(); <span style="color:#75715e">//创建XHR对象
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">open</span>(<span style="color:#e6db74">&#34;get&#34;</span>,<span style="color:#e6db74">&#34;/data&#34;</span>);   <span style="color:#75715e">//规定请求类型
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">send</span>()                      <span style="color:#75715e">//发送请求
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">onreadystatechange</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>(){ <span style="color:#75715e">//监听readyState事件
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// 0: 请求未初始化
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// 1: 服务器连接已建立
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// 2: 请求已接收
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// 3: 请求处理中
</span></span></span><span style="display:flex;"><span><span style="color:#75715e">// 4: 请求已完成，且响应已就绪
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>  <span style="color:#66d9ef">if</span>(<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">readyState</span> <span style="color:#f92672">===</span> <span style="color:#ae81ff">4</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">status</span> <span style="color:#f92672">===</span> <span style="color:#ae81ff">200</span>){
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">alert</span>(<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">responseText</span>)
</span></span><span style="display:flex;"><span>  }
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><h2 id="封装一个ajax方法">封装一个Ajax方法</h2>
<h3 id="回调函数">回调函数</h3>
<p>将上面的程序封装到一个myAjax方法，实例代码如下所示，这里需要注意的是，因为Ajax是异步的操作，因此封装的Ajax不能用return获取返回值。下面的示例使用的是回调函数封装的Ajax方法</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">myAjax</span>(<span style="color:#a6e22e">method</span>,<span style="color:#a6e22e">url</span>,<span style="color:#a6e22e">next</span>) {
</span></span><span style="display:flex;"><span>   <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">xhr</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">XMLHttpRequest</span>();
</span></span><span style="display:flex;"><span>   <span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">open</span>(<span style="color:#a6e22e">method</span>, <span style="color:#a6e22e">url</span>);
</span></span><span style="display:flex;"><span>   <span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">send</span>()
</span></span><span style="display:flex;"><span>   <span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">onreadystatechange</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> () {
</span></span><span style="display:flex;"><span>       <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">readyState</span> <span style="color:#f92672">===</span> <span style="color:#ae81ff">4</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">status</span> <span style="color:#f92672">===</span> <span style="color:#ae81ff">200</span>) {
</span></span><span style="display:flex;"><span>           <span style="color:#a6e22e">next</span>(<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">responseText</span>);
</span></span><span style="display:flex;"><span>       }
</span></span><span style="display:flex;"><span>   }
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#34;button&#34;</span>).<span style="color:#a6e22e">onclick</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span>() {<span style="color:#75715e">//调用封装的Ajax
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>  <span style="color:#a6e22e">myajax</span>(<span style="color:#e6db74">&#34;get&#34;</span>,<span style="color:#e6db74">&#34;/data&#34;</span>,<span style="color:#66d9ef">function</span>(<span style="color:#a6e22e">data</span>){
</span></span><span style="display:flex;"><span>      <span style="color:#a6e22e">alert</span>(<span style="color:#a6e22e">data</span>);
</span></span><span style="display:flex;"><span>  });
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><h3 id="promise">promise</h3>
<p>过多的使用回调函数会让程序变得很难维护（回调地狱），可以用Promise重新封装ajax方法，示例代码如下所示：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">function</span> <span style="color:#a6e22e">myajax</span>(<span style="color:#a6e22e">method</span>, <span style="color:#a6e22e">url</span>, <span style="color:#a6e22e">next</span>) {
</span></span><span style="display:flex;"><span>   <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">new</span> Promise(<span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">resolve</span>,<span style="color:#a6e22e">reject</span>) {
</span></span><span style="display:flex;"><span>       <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">xhr</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">XMLHttpRequest</span>();
</span></span><span style="display:flex;"><span>       <span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">open</span>(<span style="color:#a6e22e">method</span>, <span style="color:#a6e22e">url</span>);
</span></span><span style="display:flex;"><span>       <span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">send</span>(); <span style="color:#75715e">//可以向后台传输数据
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>       <span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">onreadystatechange</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">function</span> () {
</span></span><span style="display:flex;"><span>           <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">readyState</span> <span style="color:#f92672">===</span> <span style="color:#ae81ff">4</span> <span style="color:#f92672">&amp;&amp;</span> <span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">status</span> <span style="color:#f92672">===</span> <span style="color:#ae81ff">200</span>) {
</span></span><span style="display:flex;"><span>               <span style="color:#a6e22e">resolve</span>(<span style="color:#a6e22e">xhr</span>.<span style="color:#a6e22e">responseText</span>);
</span></span><span style="display:flex;"><span>           }
</span></span><span style="display:flex;"><span>       }
</span></span><span style="display:flex;"><span>       <span style="color:#a6e22e">reject</span>(<span style="color:#e6db74">&#34;获取数据失败&#34;</span>)
</span></span><span style="display:flex;"><span>   })
</span></span><span style="display:flex;"><span>}
</span></span><span style="display:flex;"><span>document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#34;button&#34;</span>).<span style="color:#a6e22e">onclick</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">async</span> <span style="color:#66d9ef">function</span> () {
</span></span><span style="display:flex;"><span>   <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">p</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">myajax</span>(<span style="color:#e6db74">&#34;get&#34;</span>, <span style="color:#e6db74">&#34;data&#34;</span>);
</span></span><span style="display:flex;"><span>   <span style="color:#a6e22e">p</span>.<span style="color:#a6e22e">then</span>(<span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">data</span>) {
</span></span><span style="display:flex;"><span>       <span style="color:#a6e22e">alert</span>(<span style="color:#a6e22e">data</span>);
</span></span><span style="display:flex;"><span>   })
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div><p>其实，使用async函数才是处理异步问题的终极解决方案。</p>
<h2 id="ajax第三方模块-axios应用">Ajax第三方模块-Axios应用</h2>
<p>Axios是一个基于promise的网络请求库，作用与node.js和浏览器。在服务端使用原生的node.js http模块，在浏览器端则使用XMLHttpRequests。</p>
<h3 id="下载并引入axios">下载并引入Axios</h3>
<p>可以直接使用npm下载Axios，命令如下：</p>
<pre tabindex="0"><code>npm install axios
</code></pre><p>因为我们要将Axios引入到前端的页面，所以需要将axios.js文件拷贝到静态文件目录。</p>
<p>在node_modules目录中，找到axios&gt;dist&gt;axios.min.js文件，拷贝到public目录中即可。然后在模板中用script标签来引入此js文件。</p>
<h3 id="后台程序">后台程序</h3>
<p>完成服务器端程序，来处理数据的增删改查，示例代码如下所示：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">//数据
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">dataList</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#34;香蕉&#34;</span>,<span style="color:#e6db74">&#34;苹果&#34;</span>,<span style="color:#e6db74">&#34;鸭梨&#34;</span>];
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">//get查看
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#34;/fruits&#34;</span>, <span style="color:#a6e22e">ctx</span> =&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">ctx</span>.<span style="color:#a6e22e">body</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">dataList</span>;
</span></span><span style="display:flex;"><span>})
</span></span><span style="display:flex;"><span><span style="color:#75715e">//post添加
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">post</span>(<span style="color:#e6db74">&#34;/fruits&#34;</span>, <span style="color:#a6e22e">ctx</span> =&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">fruit</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">ctx</span>.<span style="color:#a6e22e">request</span>.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">fruit</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">dataList</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">fruit</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">ctx</span>.<span style="color:#a6e22e">body</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">dataList</span>;
</span></span><span style="display:flex;"><span>})
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span><span style="color:#75715e">//put修改
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">put</span>(<span style="color:#e6db74">&#34;/fruits/:id&#34;</span>, <span style="color:#a6e22e">ctx</span> =&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">id</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">ctx</span>.<span style="color:#a6e22e">params</span>.<span style="color:#a6e22e">id</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">fruit</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">ctx</span>.<span style="color:#a6e22e">request</span>.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">fruit</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">dataList</span>.<span style="color:#a6e22e">splice</span>(<span style="color:#a6e22e">id</span>,<span style="color:#ae81ff">1</span>,<span style="color:#a6e22e">fruit</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">ctx</span>.<span style="color:#a6e22e">body</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">dataList</span>;
</span></span><span style="display:flex;"><span>})
</span></span><span style="display:flex;"><span><span style="color:#75715e">//delete删除
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">router</span>.<span style="color:#66d9ef">delete</span>(<span style="color:#e6db74">&#34;/fruits/:id&#34;</span>, <span style="color:#a6e22e">ctx</span> =&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">id</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">ctx</span>.<span style="color:#a6e22e">params</span>.<span style="color:#a6e22e">id</span>;
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">dataList</span>.<span style="color:#a6e22e">splice</span>(<span style="color:#a6e22e">id</span>,<span style="color:#ae81ff">1</span>);
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">ctx</span>.<span style="color:#a6e22e">body</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">dataList</span>;
</span></span><span style="display:flex;"><span>})
</span></span></code></pre></div><p>数组的splice可以实现数组元素的添加、删除、和修改。用法如下：</p>
<p>array.splice(要删除元素的索引,删除几个元素,替换删除元素的元素);</p>
<p>通过设置上面描述的三个参数，就可以实现数据的增删改查，实例代码如下所示：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#66d9ef">let</span> <span style="color:#a6e22e">dataList</span> <span style="color:#f92672">=</span> [<span style="color:#e6db74">&#34;香蕉&#34;</span>,<span style="color:#e6db74">&#34;苹果&#34;</span>,<span style="color:#e6db74">&#34;鸭梨&#34;</span>];
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">dataList</span>.<span style="color:#a6e22e">splice</span>(<span style="color:#ae81ff">0</span>,<span style="color:#ae81ff">1</span>) <span style="color:#75715e">//从索引为0的元素开始，删除1个元素，此案例会删除香蕉-删除功能。
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">dataList</span>.<span style="color:#a6e22e">splice</span>(<span style="color:#ae81ff">1</span>,<span style="color:#ae81ff">0</span>,<span style="color:#e6db74">&#34;草莓&#34;</span>) <span style="color:#75715e">//从索引为1的元素开始，删除0个元素，并在删除元素的位置插入&#34;草莓&#34;-添加功能。
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#a6e22e">dataList</span>.<span style="color:#a6e22e">splice</span>(<span style="color:#ae81ff">1</span>,<span style="color:#ae81ff">1</span>,<span style="color:#e6db74">&#34;草莓&#34;</span>) <span style="color:#75715e">//从索引为1的元素开始，删除1个元素，并在删除元素的位置插入&#34;草莓&#34;-修改功能。
</span></span></span></code></pre></div><h3 id="jquery中的ajax方法">jQuery中的ajax方法</h3>
<p>jQuery也封装了Ajax方法，实例代码如下所示：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">$</span>.<span style="color:#a6e22e">ajax</span>({
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">url</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;/fruit&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">type</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;get&#34;</span>
</span></span><span style="display:flex;"><span>}).<span style="color:#a6e22e">done</span>( <span style="color:#a6e22e">res</span> =&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">res</span>);
</span></span><span style="display:flex;"><span>})
</span></span></code></pre></div><p>如果项目是基于jQuery开发的，jQuery中的Ajax方法可以完全替代Axios，但是如果项目并没有使用jQuery，那么使用Axios这种轻量级的Ajax库会更方便。</p>
<h2 id="跨域请求">跨域请求</h2>
<h3 id="同源策略">同源策略</h3>
<p>同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。</p>
<p><strong>相同ip（域名），同端口，则为同源，否则为不同源</strong></p>
<p>同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制</p>
<h3 id="jsonp原理">jsonp原理</h3>
<p>Ajax在默认的情况下是不可以跨域的，但是script标签可以通过src属性获取到跨域的js文件。</p>
<p>因此我们可以想到一个办法，把数据装载到js文件中，然后通过script标签跨域引入到当前项目中，进而使用跨域的数据。</p>
<p>这里需要注意的是，jsonp本质上并不是Ajax，但是功能很像，所以经常会把jsonp方法和Ajax放在一起讨论</p>
<p>现在模拟一个jsonp的示例：</p>
<ul>
<li>1.在本地开启两个服务器，端口分别为8080和3000。</li>
<li>2.把待获取的数据放在3000端口服务器的一个js文件中。</li>
<li>3.3000端口服务器的前端页面引入8080端口服务器的js文件。</li>
<li>4.然后使用3000端口服务器的数据。</li>
</ul>
<p>通过JSONP实现跨域请求：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#75715e">//核心代码如下所示
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">jsonp</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">&#39;koa-jsonp&#39;</span>)
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">app</span>.<span style="color:#a6e22e">use</span>(<span style="color:#a6e22e">jsonp</span>())
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#34;/data&#34;</span>, <span style="color:#a6e22e">ctx</span> =&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">ctx</span>.<span style="color:#a6e22e">body</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;hello jsonp&#34;</span>
</span></span><span style="display:flex;"><span>})
</span></span><span style="display:flex;"><span><span style="color:#a6e22e">$</span>.<span style="color:#a6e22e">ajax</span>({
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">url</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;http://127.0.0.1:3000/data&#34;</span>,
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">dataType</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#34;jsonp&#34;</span>
</span></span><span style="display:flex;"><span>}).<span style="color:#a6e22e">done</span>( <span style="color:#a6e22e">res</span> =&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">res</span>);
</span></span><span style="display:flex;"><span>})
</span></span></code></pre></div><h3 id="设置响应头">设置响应头</h3>
<p>很多时候我们在制作一个前后端分离的项目时，开发过程是需要跨域的，但是项目部署后并不需要跨域，这个时候，我们可以直接设置服务器允许跨域。</p>
<p>通过设置http协议的响应头部属性Access-Control-Allow-Origin可以允许其他服务器对本服务进行跨域请求，示例代码如下所示：</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-javascript" data-lang="javascript"><span style="display:flex;"><span><span style="color:#a6e22e">router</span>.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">&#34;/getdata&#34;</span>, <span style="color:#66d9ef">async</span> (<span style="color:#a6e22e">ctx</span>) =&gt; {
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">ctx</span>.<span style="color:#a6e22e">set</span>(<span style="color:#e6db74">&#39;Access-Control-Allow-Origin&#39;</span>, <span style="color:#e6db74">&#39;http://127.0.0.1:8080&#39;</span>); 
</span></span><span style="display:flex;"><span>    <span style="color:#a6e22e">ctx</span>.<span style="color:#a6e22e">body</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;data&#34;</span>
</span></span><span style="display:flex;"><span>});
</span></span></code></pre></div><p>设置之后，/getdata这个接口就会允许跨域请求了。</p>





<footer class=" footline" >
	
</footer> 

         
        </div>
        

      </div>

    <div id="navigation">
        
        

        
            
            
                
                    
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                        
                        
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                        
                        
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
                        
            
            
                
                    
                
                

                    
                    
                        
                    
                    

                    
                        
            
            
                
                    
                
                

                    
                    
                    

                    
            
        
                    
            
        
                    
            
        

        


	 
	 
		
			<a class="nav nav-prev" href="/javascript/%E8%AE%A1%E6%97%B6%E5%99%A8%E6%96%B9%E6%B3%95%E5%8F%8A%E5%85%B6%E7%9B%B8%E5%85%B3%E5%BA%94%E7%94%A8/" title="JS定时器应用"> <i class="fa fa-chevron-left"></i></a>
		
		
			<a class="nav nav-next" href="/javascript/%E5%AF%B9%E8%B1%A1%E6%8B%B7%E8%B4%9D/" title="JS对象拷贝" style="margin-right: 0px;"><i class="fa fa-chevron-right"></i></a>
		
	
    </div>

    </section>

    <div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
      <div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
    </div>
    <script src="/js/clipboard.min.js?1648731304"></script>
    <script src="/js/perfect-scrollbar.min.js?1648731304"></script>
    <script src="/js/perfect-scrollbar.jquery.min.js?1648731304"></script>
    <script src="/js/jquery.sticky.js?1648731304"></script>
    <script src="/js/featherlight.min.js?1648731304"></script>
    <script src="/js/highlight.pack.js?1648731304"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script src="/js/modernizr.custom-3.6.0.js?1648731304"></script>
    <script src="/js/learn.js?1648731304"></script>
    <script src="/js/hugo-learn.js?1648731304"></script>
    
        
            <script src="https://unpkg.com/mermaid@8.8.0/dist/mermaid.min.js"></script>
        
        <script>
            mermaid.initialize({ startOnLoad: true });
        </script>
    
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-105947713-1', 'auto');
  ga('send', 'pageview');

</script>
  </body>
</html>
 